<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="static/css/reset.css">
    <link rel="stylesheet" type="text/css" href="static/css/login-register.css">
    <script type="text/javascript" src="static/js/jquery.min.js"></script>
</head>

<body>
    <div id="header">
        <div class="flex-header">
            <span class="flex title">注册</span>
        </div>
    </div>
    <form action="" method="post" id="login-register">
        <label for="number">
            <input type="text" name="number" placeholder="学号" id="number">
        </label>
        <label for="role">
            <select name="role" id="role">
                <option value="1">老师</option>
                <option value="2">学生</option>
            </select>
        </label>
        <label for="name">
            <input type="text" name="name" placeholder="姓名" id="name">
        </label>
        <label for="password">
            <input type="password" name="password" placeholder="密码" id="password">
        </label>
        <label for="rePassword">
            <input type="password" name="rePassword" placeholder="确认密码" id="rePassword">
        </label>
        <button class="lr-button">注册</button>
    </form>
    <script type="text/javascript">
    $(document).ready(function() {
        function getJsonData() {
            let data = {
                number: $("#number").val(),
                role: parseInt($("#role").val()),
                name: $("#name").val(),
                password: $("#password").val()
            }
            return data;
        }

        $("form").submit(function(event) {
            console.log(getJsonData());
            event.preventDefault();
            $.ajax({
                    url: '/user/regist',
                    type: 'post',
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(getJsonData()),
                    // dataType: 'json'
                })
                .done(function(data) {
                    console.log(data);
                })
                .fail(function() {
                    console.log("error");
                })
                .always(function() {
                    console.log("complete");
                });
        });
    })
    </script>
</body>

</html>
